import React from 'react'
import {connect,} from 'react-redux'
import {withRoter, withRouter,} from 'react-router-dom'
import LocalStorageService from "../../../utils/LocalStorageService";
import ScrollList from "../../../shared-components/ScrollList/ScrollList";
import DeleteIcon from "../../../res/images/web/topic/delete@2x.png"
import TwoPageTabs from "../TwoPageTabs/TwoPageTabs";
import CommentItem from "../CommentItem/CommentItem";
import ZanItem from "../ZanItem/ZanItem";


class MyComments extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            // p: 0,
            p: [0, 0,],
            height: document.documentElement.clientHeight - 90,
            tabs: [
                {title: '话题的评论', active: true,},
                {title: '视频的评论', active: false,}
            ],
        }
    }

    componentDidMount() {
        // this.get()
        this.get(0)
    }

    get = (index) => {
        const uid = this.uid
        const p = Number(this.state.p[index])
        const zan = 0
        if (index === 0) {
            this.props.doGetMyComments({uid, p, zan})
        } else if (index === 1) {
            this.props.doGetMyVodComments({uid, p, zan})
        }

    }

    delete = (comment, type) => {
        const commentid = comment.Id
        const uid = this.uid
        if (type === 'topic') {
            this.props.doDeleteComment({commentid, uid,})
        } else if (type === 'vod') {
            this.props.doDeleteVodComment({commentid, uid,})
        }

    }

    onTabClick = (index) => {
        const tabs = this.state.tabs
        if (index === 0) {
            tabs[0].active = true
            tabs[1].active = false
        } else {
            tabs[0].active = false
            tabs[1].active = true
            const myVodZans = this.props.topic.myVodComments
            if (Object.keys(myVodZans.lists).length === 0) {
                this.get(1)
            }
        }
        this.setState({
            tabs,
        })
    }

    // onScroll = e => {
    //     const end = this.props.topic.myComments.end
    //     if (end) {
    //         return
    //     }
    //     const top = e.target.scrollTop
    //     const hei = e.target.scrollHeight
    //     const cHei = document.documentElement.clientHeight
    //     const gap = hei - top - cHei + 50
    //     if (gap < 50) {
    //         this.setState({
    //             p: this.state.p + 1,
    //         }, () => this.get())
    //     }
    //
    // }

    render() {

        const history = this.props.history
        const myZans = this.props.topic.myComments
        const end = myZans.end
        const lists = myZans.lists
        const commentList = []
        const ps = Object.keys(lists)
        ps.map(p => commentList.push(...lists[p]))

        const myVodComments = this.props.topic.myVodComments
        const vodEnd = myVodComments.end
        const vodLists = myVodComments.lists
        const vodCommentList = []
        const vodPs = Object.keys(vodLists)
        vodPs.map(p => vodCommentList.push(...vodLists[p]))

        const tabsState = this.state.tabs

        const tabs = <TwoPageTabs tabsState={tabsState} onTabClick={this.onTabClick}/>

        const topicActive = this.state.tabs[0].active
        const vodActive = this.state.tabs[1].active

        const myCommentsTemplate =
            <ScrollList
                endCondition={end}
                ctnStyle={{
                    height: this.state.height,
                    overflowY: 'scroll',
                    display: topicActive ? '' : 'none',
                }}
                gap={50}
                endHeight={200}
                scrollCallback={() => {
                    this.setState({
                        p: [this.state.p[0] + 1, this.state.p[1],]
                    }, () => this.get(0))
                }}
            >
                {commentList.map((c, index) => <CommentItem
                    key={index} comment={c}
                    formatDate={this.props.formatDate}
                    onDelete={this.delete}
                    commentType={'topic'}
                />)}
            </ScrollList>

        const myVodCommentsTemplate =
            <ScrollList
                endCondition={vodEnd}
                ctnStyle={{
                    height: this.state.height,
                    overflowY: 'scroll',
                    display: vodActive ? '' : 'none',
                }}
                gap={50}
                endHeight={200}
                scrollCallback={() => {
                    this.setState({
                        p: [this.state.p[0], this.state.p[1] + 1,]
                    }, () => this.get(1))
                }}
            >
                {vodCommentList.map((c, index) => <CommentItem
                    key={index}
                    comment={c}
                    formatDate={this.props.formatDate}
                    onDelete={this.delete}
                    commentType='vod'
                />)}
            </ScrollList>
        return <>
            {tabs}
            {myCommentsTemplate}
            {myVodCommentsTemplate}
        </>



        return <>
            {tabs}
            {myCommentsTemplate}
        </>



        const list = commentList.map((c, i) => {
            const {
                Hfavatar,
                Hfname,
                Zant,
                Htid,
                Hfuid,
                Hftxt,
            } = c

            const avatar = <div
                style={{marginRight: '8px'}}
                onClick={() => history.push(`../topic/${Htid}`)}
            >
                <img src={Hfavatar} alt='' className='my-topic-item-avatar'/>
            </div>
            const name = <p style={{marginBottom: '4px',}}>{Hfname}</p>
            const date = <p className='gray-text' style={{marginBottom: '10px',}}>{this.props.formatDate(Zant)}</p>
            const self = Hfuid === this.uid
            const myTxt = <p style={{wordBreak: 'break-all'}}>{`评论：${Hftxt}`}</p>
            const otherTxt = <p style={{wordBreak: 'break-all'}}>{`回复您：${Hftxt}`}</p>
            const deleteIcon = <img
                alt=''
                src={DeleteIcon}
                style={{
                    position: 'absolute',
                    top: '16px',
                    right: '16px',
                    width: '24px',
                    height: '24px',
                    zIndex: 2,
                }}
                onClick={() => this.delete(c)}
            />
            return <div
                className='my-topic-zan-ctn flex' key={i}
            >
                {avatar}
                <div
                    onClick={() => history.push(`../topic/${Htid}`)}
                >
                    {name}
                    {date}
                    {self ? myTxt : otherTxt}
                </div>
                {self ? deleteIcon : null}
            </div>
        })

        return <ScrollList
            endCondition={end}
            ctnStyle={{
                height: this.state.height,
                overflowY: 'scroll',
            }}
            gap={50}
            endHeight={200}
            scrollCallback={() => {
                this.setState({
                    p: this.state.p + 1,
                }, () => this.get())
            }}
        >
            {list}
        </ScrollList>

        // return <div
        //     className='topic-list-ctn'
        //     style={{height: 'calc(100vh - 50px)', overflowY: 'scroll',}}
        //     onScroll={e => this.onScroll(e)}
        //     ref={el => this.listCtn = el}
        // >
        //     {list}
        // </div>
    }
}

const mapState = state => ({
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    doGetMyComments: payload => dispatch.topic.doGetMyComments(payload),
    doDeleteComment: payload => dispatch.topic.doDeleteComment(payload),
    doGetMyVodComments: payload => dispatch.topic.doGetMyVodComments(payload),
    doDeleteVodComment: payload => dispatch.topic.doDeleteVodComment(payload),
})
// export default MyComments
export default connect(mapState, mapDispatch)(withRouter(MyComments))
